import React from "react";
import {
  List,
  Card,
  Space,
  Tag,
  Avatar,
  Typography,
  Tooltip,
  Button,
} from "antd";
import {
  UserOutlined,
  LikeOutlined,
  EyeOutlined,
  MessageOutlined,
  PushpinOutlined,
  RobotOutlined,
  CrownOutlined,
} from "@ant-design/icons";
import styled from "styled-components";
import type { DiscussionPost } from "../../../common/types/discussion";

const { Text, Paragraph } = Typography;

// 教师端专用样式
const TeacherStyledCard = styled(Card)`
  margin-bottom: 16px;
  .ant-card-head {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    .ant-card-head-title {
      color: white;
    }
  }
`;

interface TeacherDiscussionsProps {
  discussions: DiscussionPost[];
  onView: (discussionId: string) => void;
  onLike: (discussionId: string) => void;
  onReply: (discussionId: string) => void;
  likedDiscussions: Set<string>;
}

const TeacherDiscussions: React.FC<TeacherDiscussionsProps> = ({
  discussions,
  onView,
  onLike,
  onReply,
  likedDiscussions,
}) => {
  const teacherDiscussions = discussions.filter(d => d.author.role === "teacher");

  return (
    <List
      dataSource={teacherDiscussions}
      renderItem={(discussion) => (
        <TeacherStyledCard
          key={discussion.id}
          hoverable
          actions={[
            <Tooltip title="查看详情">
              <EyeOutlined onClick={() => onView(discussion.id)} />
            </Tooltip>,
            <Tooltip title="点赞">
              <LikeOutlined
                style={{ color: likedDiscussions.has(discussion.id) ? "#1890ff" : undefined }}
                onClick={() => onLike(discussion.id)}
              />
            </Tooltip>,
            <Tooltip title="回复">
              <MessageOutlined onClick={() => onReply(discussion.id)} />
            </Tooltip>,
          ]}
        >
          <List.Item>
            <List.Item.Meta
              avatar={
                <Avatar
                  src={discussion.author.avatar}
                  icon={<UserOutlined />}
                  style={{ backgroundColor: "#1890ff" }}
                />
              }
              title={
                <Space>
                  {discussion.isPinned && (
                    <Tooltip title="已置顶">
                      <PushpinOutlined style={{ color: "#1890ff" }} />
                    </Tooltip>
                  )}
                  <Button
                    type="link"
                    onClick={() => onView(discussion.id)}
                    style={{ padding: 0, height: "auto" }}
                  >
                    {discussion.title}
                  </Button>
                  <Tag icon={<CrownOutlined />} color="gold">
                    教师
                  </Tag>
                  {discussion.aiResponse && (
                    <Tag icon={<RobotOutlined />} color="purple">
                      AI已回复
                    </Tag>
                  )}
                </Space>
              }
              description={
                <Space direction="vertical" size="small" style={{ width: "100%" }}>
                  <Space>
                    <Text strong>{discussion.author.name}</Text>
                    <Text type="secondary">{discussion.createTime}</Text>
                  </Space>
                  <Paragraph ellipsis={{ rows: 2 }}>{discussion.content}</Paragraph>
                  <Space>
                    {discussion.tags.map((tag) => (
                      <Tag key={tag} color="blue">
                        {tag}
                      </Tag>
                    ))}
                  </Space>
                  <Space>
                    <Text type="secondary">
                      <EyeOutlined /> {discussion.views}
                    </Text>
                    <Text type="secondary">
                      <LikeOutlined /> {discussion.likes}
                    </Text>
                    <Text type="secondary">
                      <MessageOutlined /> {discussion.replies.length}
                    </Text>
                  </Space>
                </Space>
              }
            />
          </List.Item>
        </TeacherStyledCard>
      )}
    />
  );
};

export default TeacherDiscussions; 